<template lang="html">
    <div class="">
        <div class="">
            <el-button
                type="primary"
                @click="timeoffFormDisplay"
                class="timeoffButton"
                size="small">
                请假申请
            </el-button>
        </div>
        <el-table
            :data="application"
            stripe
            style="width: 100%"
            class="tableDatadisplay">
          <el-table-column
            prop="holidayStart"
            label="假期开始日期"
            :formatter="formatDate1"
            sortable
            align="center">
          </el-table-column>
          <el-table-column
            prop="holidayEnd"
            label="假期结束日期"
            sortable
            :formatter="formatDate2"
            align="center">
          </el-table-column>
            <el-table-column
                prop="type"
                label="请假类型"
                align="center">
            </el-table-column>
          <el-table-column
            label="请假原因"
            prop="reason"
            align="center">
          </el-table-column>
          <el-table-column
            label="审批状态"
            prop="status"
		       	sortable
            :formatter="formatStatus"
            align="center">
          </el-table-column>
          <el-table-column
            label="审批人"
            prop="approverId"
            align="center">
          </el-table-column>
            <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="10"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total=application.length>
        </el-pagination>
        <el-dialog
            title="请假申请单"
            :visible.sync="dialogFormVisible"
            :before-close="handleDialogClose">
            <el-form
                :model="timeoffForm"
                label-position="right"
                label-width="140px">
                <el-form-item
                    label="请假起止日期">
                  <el-date-picker
                    v-model="timeoffForm.timeoff_date"
                    type="datetimerange"
                    align="right"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['09:00:00', '17:00:00']">
                  </el-date-picker>
                    <!--</el-date-picker>-->
                </el-form-item>
                <!--<el-form-item-->
                    <!--label="请假天数">-->
                    <!--<el-input-number-->
                        <!--v-model="timeoffForm.timeoff_day"-->
                        <!--class="timeoffType"-->
                        <!--:min="1"-->
                        <!--size="small"-->
                        <!--:disabled="true">-->
                    <!--</el-input-number>-->
                <!--</el-form-item>-->
                <el-form-item
                    label="请假类型">
                    <el-select
                        v-model="timeoffForm.timeoff_type"
                        placeholder="请选择请假类型"
                        class="timeoffType"
                        size="small">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item-->
                    <!--label="预计补班日期">-->
                    <!--<el-date-picker-->
                        <!--type="dates"-->
                        <!--v-model="timeoffForm.expect_date"-->
                        <!--placeholder="选择一个或多个日期"-->
                        <!--size="small">-->
                    <!--</el-date-picker>-->
                <!--</el-form-item>-->
                <el-form-item
                    label="请假原因">
                    <el-input
                        class="timeoffDecs"
                        type="textarea"
                        :rows="5"
                        v-model="timeoffForm.decs"
                        size="small">
                    </el-input>
                </el-form-item>
            </el-form>
                <div
                    slot="footer"
                    class="dialog-footer">
                    <el-button
                        @click="handleDialogClose"
                        size="small">
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        @click="submitForm"
                        size="small">
                        确 定
                    </el-button>
                </div>
          </el-dialog>

    </div>
</template>

<script>
export default {
  mounted: function () {
    var storage=window.localStorage;
    this.id=storage.getItem("user_id");
    this.name=storage.getItem("user_name");
    this.refresh()
  },
    data() {
        return {
          name:null,
          change:{},
          id:null,
          application:[],
          props:['allApplication'],
            //当前页
            currentPage: 1,
            //dialog的显示
            dialogFormVisible: false,
            //表单初始化
            timeoffForm: {
                timeoff_date: [],
                timeoff_type: '',
                expect_date: [],
                decs: ''
            },
            //选择器
            options: [{
                value: '事假',
                label: '事假'
            }, {
                value: '病假',
                label: '病假'
            }, {
                value: '婚假',
                label: '婚假'
            }, {
                value: '年假',
                label: '年假'
            }, {
                value: '产假',
                label: '产假'
            }, {
                value: '丧假',
                label: '丧假'
            }, {
                value: '陪产假',
                label: '陪产假'
            }]
        }
    },
    methods: {
    refresh(){
      this.$http.get('api/leavingsystem/application/staff/' + this.id, {headers:{"Authorization": "1000.123456.1"}}).then(response =>{
        // console.log("good");
        this.application=response.data.data;
        this.application= this.application.filter(ap => ap.status != 0);
        console.log(this.application)
      }, response =>{
        // alert("wrong");
        console.log("wrong");
        // console.log(response.data);
        this.$alert('系统繁忙，请刷新重试', '加载失败', {
          confirmButtonText: '确定',

        });

      });
    },
    formatDate1(row){
      return this.$moment(row.holidayStart).format('YYYY-MM-DD HH:mm:ss');
    },
      formatDate2(row){
        return this.$moment(row.holidayEnd).format('YYYY-MM-DD HH:mm:ss');
      },
      //状态改成汉字
      formatStatus: function (row, column, cellValue, index) {
        return row.status == 1 ? '已通过' : row.sex == 2 ? '未通过' : '未通过';
      },

        //处理页面跳转请求
        handleCurrentChange(item) {
            console.log(item);
        },
        //处理每页的个数发生变化
        handleSizeChange(item) {
            console.log(item);
        },
        //打开请假修改单
        timeoffFormDisplay() {
            this.dialogFormVisible = true;
        },
        //当对话框关闭时，初始化数据
        handleDialogClose() {
            this.timeoffForm = {
                timeoff_date: [],
                timeoff_day: 1,
                timeoff_type: '',
                expect_date: [],
                decs: ''
            };
            this.dialogFormVisible = false;
        },
        //提交请假申请单
      submitForm() {
        if(this.timeoffForm.timeoff_date==null || this.timeoffForm.timeoff_type==null){
          this.$alert('请填写必要信息', '提交失败', {
            confirmButtonText: '确定',
          });
        }else{

          console.log(this.timeoffForm.timeoff_date);
          this.change.staffId=this.id;
          this.change.staffName=this.name;
          this.change.holidayStart=this.timeoffForm.timeoff_date[0];
          this.change.holidayEnd=this.timeoffForm.timeoff_date[1];
          this.change.type=this.timeoffForm.timeoff_type;
          this.change.reason=this.timeoffForm.decs;
          this.$http.post('api/leavingsystem/application/',this.change, {headers:{"Authorization": "1000.123456.1"}, emulateJSON: true}).then(response =>{
            if(response.data.error_code==0){
              this.$notify({
                title: '成功',
                message: '提交成功!',
                type: 'success'
              });
            }else{
              this.$notify({
                title: '失败',
                message: '提交失败!',
                type: 'error'
              });
            }
            console.log("good");
            console.log(response.data);
            this.refresh()
          },response=>{
            this.$notify({
              title: '失败',
              message: '提交失败!',
              type: 'error'
            });
            console.log("wrong");
            console.log(response.data);
          });

          console.log(this.timeoffForm.timeoff_date);
          console.log("提交请假申请单");
          this.handleDialogClose();

        }


      }
    }
}
</script>

<style lang="css">
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

.timeoffButton {
    float: right;
}
.tableDatadisplay {
    margin-bottom: 40px;
}
.timeoffDecs {
    width: 350px;
}
.timeoffType {
    width: 220px;
}
</style>
